import React from 'react'
import {useSelector, useDispatch} from 'react-redux';
import { decre, incre, asyncIncreAction } from '../../app/slices/countSlice';
import { incre as inc, decre as dec, asyncIncre } from '../../app/slices/zanSlice';

export default function ReduxToolKit() {
  //获取 redux 中的状态
  let {count, zan} = useSelector(state => state);
  
  //获取 dispatch 函数
  let dispatch = useDispatch();

  return (
    <div>
      <h2>当前的计数值: {count}</h2>
      <button onClick={() => {
        dispatch(incre(1))
      }}>新增</button>
      <button onClick={() => {
        dispatch(decre(1))
      }}>减少</button>
      <button onClick={() => {
        dispatch(asyncIncreAction(10));
      }}>2秒后新增10</button>

      <h2>当前的点赞数: {zan.value}</h2>
      <button onClick={() => {
        dispatch(inc(1));
      }}>+1</button>
      <button onClick={() => {
        dispatch(dec(1));
      }}>-1</button>
      <button onClick={async () => {
        let res = await dispatch(asyncIncre())
        if(res.type === "zan/async_add/rejected"){
          alert('更新失败~~');
        }else if(res.type === 'zan/async_add/fulfilled'){
          alert('更新成功');
        }

      }}>1秒后新增1</button>

      <h3>{zan.msg}</h3>
    </div>
  )
}
